<!-- 公安  市、区县。街道 调查员   整治排查进度统计 -->
<template>
  <div>
    <div class="header">
      <div> 整治排查进度统计 </div>
      <div class="search" v-if="data.cityToken === '110000'">
        <span>请选择市区：</span>
        <a-select
          ref="select"
          v-model:value="value1"
          style="width: 120px"
          :options="options"
          @change="handleChange"
        />
        <a-button type="primary" @click="queryFn">查询44</a-button>
      </div>
      <div class="table-settings">
        <ImportSetting :tableData="tableData" :tableColumns="tableColumns" v-if="true" />
      </div>
    </div>
    <a-table
      :dataSource="tableData"
      :columns="tableColumns"
      :pagination="false"
      bordered
      :loading="loading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'region_name'">
          <span>
            <div :class="getStyle(record.id)">
              {{ record.region_name }}
            </div>
          </span>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, toRefs, onMounted } from 'vue';
  import ImportSetting from './ImportSetting.vue';
  import { getGongAnCountList, getGongAnCountPostList } from '/@/api/demo/system';
  import { iTableData, iTableColumns } from './types/table';
  import { iParams } from './types/params';

  import { useUserStore } from '/@/store/modules/user';

  // 转义地区编码
  import { selectClassFlyDict } from '/@/dict/bj_dict';
  let data = reactive<{
    tableData: iTableData[];
    tableColumns: iTableColumns[];
    id: number;
    loading: boolean;
    keyWorld: string;
  }>({
    // 表格数据
    tableData: [],
    tableColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        width: 100,
      },
      {
        title: '行政区代码',
        dataIndex: 'id',
        key: 'id',
        align: 'center',
      },
      {
        title: '行政区名称',
        dataIndex: 'region_name',
        key: 'region_name',
        // align: 'center',
      },
      {
        title: '总数',
        dataIndex: 'total',
        key: 'total',
        align: 'center',
      },
      {
        title: '已排查',
        dataIndex: 'ypc',
        key: 'ypc',
        align: 'center',
      },
      {
        title: '排查中',
        dataIndex: 'pcz',
        key: 'pcz',
        align: 'center',
      },
      {
        title: '无需排查',
        dataIndex: 'wxpcz',
        key: 'wxpcz',
        align: 'center',
      },
      {
        title: '未排查',
        dataIndex: 'wpc',
        key: 'wxpcz',
        align: 'center',
      },
      {
        title: '排查进度',
        dataIndex: 'ratio',
        key: 'ratio',
        align: 'center',
      },
    ],
    id: null,
    loading: true,
    cityToken: '',
    keyWorld: '',
  });
  const value1 = ref<string>('北京市'); // 存储select 的 默认值
  const options = ref<SelectTypes['options']>([
    {
      value: '110000',
      label: '北京市',
    },
    {
      value: '110101',
      label: '东城区',
    },
    {
      value: '110102',
      label: '西城区',
    },
    {
      value: '110105',
      label: '朝阳区',
    },
    {
      value: '110106',
      label: '丰台区',
    },
    {
      value: '110107',
      label: '石景山区',
    },
    {
      value: '110108',
      label: '海淀区',
    },
    {
      value: '110109',
      label: '门头沟区',
    },

    {
      value: '110111',
      label: '房山区',
    },
    {
      value: '110112',
      label: '通州区',
    },
    {
      value: '110113',
      label: '顺义区',
    },
    {
      value: '110114',
      label: '昌平区',
    },

    {
      value: '110115',
      label: '大兴区',
    },
    {
      value: '110116',
      label: '怀柔区',
    },
    {
      value: '110117',
      label: '平谷区',
    },
    {
      value: '110118',
      label: '密云区',
    },

    {
      value: '110119',
      label: '延庆区',
    },
    {
      value: '110171',
      label: '北京市经济技术开发区',
    },
  ]);
  let { tableData, tableColumns, loading, keyWorld } = toRefs(data);
  function getAreaToken() {
    const { getUserInfo } = useUserStore();
    // console.log('@getUserInfo', getUserInfo);
    data.cityToken = (getUserInfo.district && getUserInfo.district.id) || '110000';
    // console.log('@截取之前的', data.cityToken);
    if (data.cityToken.length === 12 && data.cityToken.substr(-3, 3) === '000') {
      // console.log('qweqwe');
      // 110105028000    地区的需要把 后面 '000' 舍弃掉
      data.id = data.cityToken.substr(0, 9);
    } else {
      data.id = (getUserInfo.district && getUserInfo.district.id) || '110000';
    }
    // console.log('@截取后的', data.id);
    // console.log('@data.cityToken', data.cityToken);
  }
  // select 选中 回调
  function handleChange(value: string) {
    data.keyWorld = value;
  }
  // 查询方法
  function queryFn() {
    data.id = keyWorld.value === '' ? data.cityToken : keyWorld;
    getData();
  }
  async function getData() {
    // 北京市 和  所有区的数据
    if (data.id === '110000') {
      let params: iParams = {
        id: `ga_tj_yhpc_${data.id}`,
      };
      let res: any = await getGongAnCountList(params);
      // console.log('@市级', res);
      if (res || res.length > 0) {
        data.loading = false;
        res.forEach((item: any, index: number) => {
          item.name = selectClassFlyDict(item.xzqdm);
          item.index = index + 1;
          if (item.ratio === null) {
            item.ratio = '';
          } else {
            item.ratio = `${item.ratio}%`;
          }
        });
        // console.log('data', data);
        data.tableData = [...res];
      }
    } else {
      // 北京市 下面 某个 区县的 数据
      let params: iParams = {
        id: `ga_tj_yhpc_qx`,
        xzqdm: `${data.id}`,
      };
      // 北京市  区县、街道的接口
      let res: any = await getGongAnCountPostList(params);
      // console.log('@res区县', res);
      if (res || res.length > 0) {
        data.loading = false;
        res.forEach((item: any, index: number) => {
          item.name = selectClassFlyDict(item.xzqdm);
          item.index = index + 1;
          if (item.ratio === null) {
            item.ratio = '';
          } else {
            item.ratio = `${item.ratio}%`;
          }
        });
        // console.log('data', data);
        data.tableData = [...res];
      }
    }
  }
  // 加样式
  function getStyle(id) {
    // console.log('@id===', id);
    // console.log('@截取', id.substr(-3, 3));
    // 北京
    if (id == '110000') {
      return `beijing`;
      //XX区
    } else if (id.length === 6 && id !== '110000') {
      return `qu`;
      // XX区 --> 地区
    } else if (id.length === 12 && id.substr(-3, 3) === '000') {
      return `town`;
      // XX区 --> 地区 -->村委会
    } else if (id.length === 12 && id.substr(-3, 3) !== '000') {
      return `street`;
    }
  }
  onMounted(() => {
    getAreaToken();
    getData();
  });
</script>

<style lang="less">
  .header {
    width: 100%;
    height: 40px;
    display: flex;
    // border: 1px solid red;
    line-height: 40px;
    justify-content: space-between;
    .search {
      // border: 1px solid green;
      align-self: flex-end;
      flex: auto;
      margin-left: 15px;
    }
    .table-settings {
      & > * {
        margin-right: 12px;
      }

      svg {
        width: 1.3em;
        height: 1.3em;
      }
    }
  }
  .beijing {
    font-weight: 700;
  }
  .qu {
    text-indent: 20px;
    font-weight: 700;
  }
  .town {
    text-indent: 40px;
  }
  .street {
    text-indent: 60px;
  }
</style>
